<template>
  <div class="DailySentenceItem">
    <van-swipe :lazy-render="true">
      <van-swipe-item
        @touchmove="cs1(item.background_color)"
        v-for="(item, index) in DailySentenceList"
        :key="index"
      >
        <div>
          <p>{{ item.desc }}</p>
          <p>———{{ item.content_author }}</p>
          <div class="DailySentenceItem-simple">
            <img :src="item.background_img" alt="" />
            <div class="DailySentenceItem-text">
              <p>{{ item.article_title }}</p>
              <div>
                <p>{{ item.author }}</p>
                <span>{{ item.content_title }}</span>
              </div>
            </div>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: "DailySentenceItem",
  props: ["DailySentenceList"],
  data() {
    return {};
  },
  methods: {
    cs1(id1) {
      console.log(22, id1);
      //   this.$bus.$emit("bgcColor", id1);
    },
  },
};
</script>

<style lang="scss" scoped>
.DailySentenceItem {
  .van-swipe {
    width: 18.75rem;
    height: 18.75rem;
    background-color: rgba(255, 255, 255, 0.7);
    margin: 6.25rem auto;
    .van-swipe-item {
      padding: 0 0.625rem;
      box-sizing: border-box;
      color: black;
      //   line-height: 12.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      //   轮播图内内容
      > div {
        // 每日一句
        p {
          padding: 0.375rem;
          font-size: 0.875rem;
        }
        p:nth-child(2) {
          position: absolute;
          right: 0;
        }
        // 单集盒子
        .DailySentenceItem-simple {
          display: flex;
          margin-top: 1.875rem;
          background-color: white;
          padding: 0.625rem;
          img {
            width: 5rem;
            height: 6.25rem;
          }
          .DailySentenceItem-text {
            font-size: 0.75rem;
            margin-left: 0.375rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            > p {
              font-size: 0.75rem;
            }
            > div {
              color: var(--fontcolor);
              p {
                font-size: 0.75rem;
              }
              span {
                padding: 0.375rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>